import { useAccess, Access } from '@umijs/max';
import { PageContainer } from '@ant-design/pro-components';
import { Table, Button, Space, Tag, message } from 'antd';
import { useState } from 'react';
import { history, useModel } from '@umijs/max';
import { connect } from 'umi';

// 模拟订单数据
const mockOrders = [
  {
    id: '1001',
    customerName: '张三',
    amount: 299.99,
    status: 'pending',
    createTime: '2023-06-01 10:30:00',
    paymentMethod: '支付宝',
  },
  {
    id: '1002',
    customerName: '李四',
    amount: 599.98,
    status: 'paid',
    createTime: '2023-06-02 14:20:00',
    paymentMethod: '微信支付',
  },
  {
    id: '1003',
    customerName: '王五',
    amount: 99.99,
    status: 'shipped',
    createTime: '2023-06-03 09:15:00',
    paymentMethod: '银行卡',
  },
  {
    id: '1004',
    customerName: '赵六',
    amount: 199.99,
    status: 'completed',
    createTime: '2023-06-04 16:45:00',
    paymentMethod: '微信支付',
  },
  {
    id: '1005',
    customerName: '钱七',
    amount: 399.99,
    status: 'cancelled',
    createTime: '2023-06-05 11:10:00',
    paymentMethod: '支付宝',
  },
];

// 订单状态映射
const orderStatusMap = {
  pending: { text: '待付款', color: 'orange' },
  paid: { text: '已付款', color: 'green' },
  shipped: { text: '已发货', color: 'blue' },
  completed: { text: '已完成', color: 'green' },
  cancelled: { text: '已取消', color: 'red' },
};

const OrderList: React.FC = () => {
  const [orders, setOrders] = useState(mockOrders);
  const access = useAccess();

  // const {name} = useModel('global')
  const {setName, name} = useModel('Orders.List.model')

  console.log(name,1111)

  // 查看订单详情
  const handleViewDetail = (id: string) => {
    history.push(`/orders/detail/${id}`);
  };

  // 取消订单
  const handleCancel = (id: string) => {
    setOrders(
      orders.map((order) =>
        order.id === id ? { ...order, status: 'cancelled' } : order,
      ),
    );
    message.success('订单已取消');
  };

  // 发货
  const handleShip = (id: string) => {
    setOrders(
      orders.map((order) =>
        order.id === id ? { ...order, status: 'shipped' } : order,
      ),
    );
    message.success('订单已发货');
  };

  // 完成订单
  const handleComplete = (id: string) => {
    setOrders(
      orders.map((order) =>
        order.id === id ? { ...order, status: 'completed' } : order,
      ),
    );
    message.success('订单已完成');
  };

  const columns = [
    {
      title: '订单号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
      key: 'customerName',
    },
    {
      title: '订单金额',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `¥${amount.toFixed(2)}`,
    },
    {
      title: '支付方式',
      dataIndex: 'paymentMethod',
      key: 'paymentMethod',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const { text, color } = orderStatusMap[status as keyof typeof orderStatusMap];
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record: any) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleViewDetail(record.id)}>
            查看
          </Button>
          <Access accessible={access.isSuperAdmin || access.canAccessOrders}>
            {record.status === 'pending' && (
              <Button type="link" danger onClick={() => handleCancel(record.id)}>
                取消
              </Button>
            )}
            {record.status === 'paid' && (
              <Button type="link" onClick={() => handleShip(record.id)}>
                发货
              </Button>
            )}
            {record.status === 'shipped' && (
              <Button type="link" onClick={() => handleComplete(record.id)}>
                完成
              </Button>
            )}
          </Access>
        </Space>
      ),
    },
  ];

  return (
    <PageContainer header={{ title: false,breadcrumb: undefined}}>
      <Table columns={columns} dataSource={orders} rowKey="id" />
    </PageContainer>
  );
};

export default connect((state) => {
  console.log('11111', state);
  return {
    // orderList: state.userInfo.loading,
  };
})(OrderList);